<template>
	<view class="index">
		<!-- 头部 背景 swiper -->
		<view class="indexHead">
			<image class="bg" src="../../../static/imges/myBG.png" mode=""></image>
			<view class="title">
				<view class="title-nav">
					<!-- <view class="cen">个人中心</view> -->
					<image @click="onSetUpIcon()" class="right" src="../../../static/xs_icon/set_up.png" mode="widthFix"></image>
				</view>
			</view>

			<!-- 名片 -->
			<view class="details-card">
				<view class="dc-main">
					<view @click="checkLogin()" v-if="!userInfo.user_token" style="display: flex;align-items: center;justify-content: center;width: 100%;">
						<view class="dc-head"><image class="head" src="../../../static/imges/headImg2.png" mode=""></image></view>
						<view class="dc-login">请登录</view>
					</view>
					<view v-else style="display: flex;align-items: center;">
						<view class="dc-head" @click="businessCard()"><image class="head" :src="userInfo.head_img" mode=""></image></view>
						<view class="dc-con">
							<view class="name" @click="businessCard()">{{ userInfo.user_nickname }}</view>
							<view class="phone">{{ userInfo.mobile }}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 我的订单 -->
			<view class="my-card">
				<view class="mc-item">
					<view class="item" @click="questionBank('library')">
						<image src="/static/xs_icon/topic1.png" mode=""></image>
						<view class="text">我的题库</view>
					</view>
					<view class="item" @click="questionBank('wrong')">
						<image src="../../../static/xs_icon/topic2.png" mode=""></image>
						<view class="text">我的错题集</view>
					</view>
					<view class="item" @click="questionBank('record')">
						<image src="../../../static/xs_icon/topic3.png" mode=""></image>
						<view class="text">考试记录</view>
					</view>
				</view>
			</view>
		</view>

		<view class="my-set-up">
			<view class="msu-main">
				<view class="msum-item">
					<view class="in-warf">
						<view class="inw-con">
							<view class="inwc-item" v-for="(item, index) in set_up_list" :key="index" @click="onSetUp(item, index)">
								<image :src="item.icon" mode=""></image>
								<text class="set-up">{{ item.text }}</text>
								<image class="inwc-r" src="../../../static/xs_icon/right3.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <u-popup v-model="showPhone" mode="bottom" border-radius="14"><phone @onCancel="onCancel"></phone></u-popup> -->
	</view>
</template>

<script>
// import { mapState, mapMutations } from 'vuex';
// import phone from '@/pages/order/order-details/to-be-paid/phone.vue';
export default {
	// components: { phone },
	data() {
		return {
			set_up_list: [
				{ icon: '../../../static/xs_icon/set-up1.png', text: '我的收藏', id: '1' },
				{ icon: '../../../static/xs_icon/set-up2.png', text: '我的购买', id: '2' },
				{ icon: '../../../static/xs_icon/set-up5.png', text: '我的付费', id: '5' },
				{ icon: '../../../static/xs_icon/set-up3.png', text: '联系学管', id: '3' },
				{ icon: '../../../static/xs_icon/set-up4.png', text: '意见反馈', id: '4' }
			],
			orderLoad: false,
			showPhone: false,
			onClick: true,
			userInfo: {}
		};
	},
	onShow() {
		this.userInfo = uni.getStorageSync('USER_INFO');
		console.log(this.userInfo);
	},
	onLoad() {
		this.into();
	},
	created() {},
	computed: {},
	methods: {
		into() {},
		// 检查是否登录
		checkLogin() {
			const token = uni.getStorageSync('USER_TOKEN');
			console.log(token);
			if (!token) {
				uni.navigateTo({
					url: '/pages/login/login/index'
				});
				return true;
			}
		},
		// 我的题库 我的错题集
		questionBank(type) {
			// type library 题库 wrong 错题集
			console.log(type);
			this.checkLogin();
			if (this.checkLogin()) return;
			if (type == 'library') {
				uni.navigateTo({ url: '../questionBank/questionBank' });
			} else if (type == 'wrong') {
				uni.navigateTo({ url: '../wrongTopic/wrongTopic' });
			} else {
				uni.navigateTo({ url: '../testRecord/testRecord' });
			}
		},
		// 头部 右上角 设置按钮
		onSetUpIcon() {
			this.checkLogin();
			if (this.checkLogin()) return;
			uni.navigateTo({
				url: '../../set-up/index/index'
			});
		},
		// 名片
		businessCard() {
			console.log('名片');
			uni.navigateTo({
				url: '../personalData/personalData'
			});
		},
		// 设置列表点击事件
		onSetUp(item, index) {
			this.checkLogin();
			if (this.checkLogin()) return;
			// console.log(item,index)
			// id 1 我的收藏 2 我的购买 3 联系学管 4 意见反馈 5 我的付费
			switch (item.id) {
				case '1':
					uni.navigateTo({ url: '../collection/collection' });
					break;
				case '2':
					uni.navigateTo({ url: '../myBuy/myBuy' });
					break;
				case '3':
					uni.navigateTo({ url: '../customer/customer' });
					break;
				case '4':
					uni.navigateTo({ url: '../feedback/feedback' });
					break;
				case '5':
					uni.navigateTo({ url: '../myPayment/myPayment' });
					break;
			}
		},
		onCancel() {
			this.showPhone = false;
		}
	},
	onPullDownRefresh() {
		this.into();
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
